<template>
  <div class="gl-border">

    <div class="content-item">
      <base-info-select :queryParams="queryParams">
        <el-input v-model="queryParams.snOrNameOrfiling"
                  :placeholder="placeholder"
                  size="small"
                  style="width: 215px;margin-top: 15px;"></el-input>
      </base-info-select>

      <p>当前状态：
        <el-select v-model="queryParams.approveStatus"
                   size="small"
                   placeholder="">
          <el-option label="全部"
                     :value="null"></el-option>
          <el-option v-for="(item, index) in statusList"
                     :key="index"
                     :label="item"
                     :value="index+1"></el-option>
        </el-select>
      </p>
      <el-button type="primary"
                 size="small"
                 @click="query()">搜索</el-button>
      <el-button type=""
                 size="small"
                 @click="reset">重置</el-button>
      <el-button type=""
                 size="small"
                 @click="exportExl('./api/apply/listAboutMe/export', queryParams)">导出</el-button>
    </div>
    <div class="content-item">
      <TabList :tabData="tabData"
               class=" table-header-gray"
               :specCol="sepecCol"
               :columns="columns"></TabList>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>
    <dialog-assign :dialogShow="assignShow"
                   :type_="queryParams.type"
                   :stepData="stepData"
                   :query="query"
                   :dialogDetail="dialogDetail"
                   @handleClose="handleClose"></dialog-assign>
    <dialog-detail :dialogShow="detailShow"
                   :filingShow="filingShow"
                   :isFiling="isFiling"
                   :filingNumber="filingNumber"
                   :type_="queryParams.type"
                   :lastAgreeRole="lastAgreeRole"
                   :stepData="stepData"
                   :query="query"
                   :dialogDetail="dialogDetail"
                   @handleClose="handleClose">
    </dialog-detail>
  </div>
</template>
<script>
import { exportFile } from '@/tools/utils'
import dialogAssign from './dialog-assign'
import dialogDetail from './dialog-detail'
import { pagination } from '@/tools/mixin'
import { getFilingNum, updateFiling } from '@/api/systemManage'
import {
  listCollegeByUserUsingGET,
  listMajorByCollegeIdUsingGET,
  listGradeByMajorIdUsingGET,
  listClassByGradeAndMajorIdUsingGET,
  dataDictUsingGET,
  listAboutMeUsingPOST,
  // listAboutMeExportUsingPOST,
  findApplyDetailUsingGET,
  listAdjustRecordUsingGET
} from '@api/auto'
import baseInfoSelect from '@components/baseInfoSelect'
export default {
  components: {
    dialogDetail,
    dialogAssign,
    baseInfoSelect
  },
  mixins: [pagination],
  beforeRouteLeave (to, from, next) {
    this.queryParams = {
      approveStatus: null,
      size: 10,
      page: 1,
      collegeId: null,
      majorId: null,
      gradeName: null,
      classId: null,
      objectOrientedName: null,
      gender: null,
      snOrNameOrfiling: null,
      type: 4
    }
    next()
  },
  data () {
    return {
      roleName: '',
      placeholder: '',
      dialogDetail: { images: '[{}]' },
      filingShow: false,
      isFiling: false,
      filingNumber: '',
      lastAgreeRole: '',
      stepData: [],
      total: 0,
      queryParams: {
        approveStatus: null,
        size: 10,
        page: 1,
        collegeId: null,
        majorId: null,
        gradeName: null,
        classId: null,
        objectOrientedName: null,
        gender: null,
        snOrNameOrfiling: null,
        type: 4
      },
      colleges: [],
      majors: [],
      grades: [],
      classes: [],
      typeList: [],
      sexList: ['未知', '男', '女'],
      statusList: ['审核中', '审批通过', '驳回', '已撤回'],
      cascade (type) {
        const actions = new Map([
          ['campus', 'changeCampus'],
          ['gardens', 'changeGardens'],
          ['buildings', 'changeBuildings'],
          ['rooms', 'changeRooms'],
          ['colleges', 'changeColleges'],
          ['majors', 'changeMajors'],
          ['grades', 'changeGrades']
        ])
        let temp = actions.get(type)
        this[temp]()
      },
      // 院系change
      changeColleges () {
        this.queryParams.majorId = ''
        this.queryParams.gradeName = ''
        this.queryParams.classId = ''
        this.listMajorByCollegeIdUsingGET(this.queryParams.collegeId)
      },
      // 专业change
      changeMajors () {
        this.queryParams.gradeName = ''
        this.queryParams.classId = ''
        this.listGradeByMajorIdUsingGET(this.queryParams.majorId)
      },
      // 年级change
      changeGrades () {
        this.queryParams.classId = ''
        this.listClassByGradeAndMajorIdUsingGET(this.queryParams.gradeName, this.queryParams.majorId)
      },
      assignShow: false,
      detailShow: false,
      tabData: [],
      columns: [
        { label: '学号', prop: 'studentSn' },
        { label: '姓名', prop: 'studentName' },
        { label: '性别', prop: 'gender' },
        { label: '学生类型', prop: 'studentType' },
        { label: '学院', prop: 'collegeName' },
        { label: '专业', prop: 'majorName' },
        { label: '年级', prop: 'gradeName' },
        { label: '班级', prop: 'className' },
        { label: '状态', prop: 'approveStatus' },
        { label: '操作', prop: 'func' }
      ],
      sepecCol: [
        { label: '性别', prop: 'gender', tem: `<span>{{$transSexUnknow(gender)}}</span>` },
        { label: '状态', prop: 'approveStatus', tem: `<span :class="'g-status-'+approveStatus">{{$transStatus(approveStatus)}}</span>` },
        { label: '操作',
          prop: 'func',
          tem: `<div>
          <el-button type="text" @click="that.$parent.check(row, 1)">查看</el-button>
        <el-button type="text" @click="that.$parent.check(row, 2)" v-if="this.$route.name === 'outRoomIndex'" :disabled="(row.approveStatus !== 2 || row.filing === 1)||(that.$parent.roleName !== '学院用户' && that.$parent.roleName !== '学校用户')">备案</el-button>
        <el-button type="text" @click="that.$parent.assign(row)" v-if="this.$route.name !== 'outRoomIndex'" :disabled="(row.approveStatus !== 2 || row.filing === 1)||(that.$parent.roleName !== '学院用户' && that.$parent.roleName !== '学校用户')">分配</el-button>
        </div>` }
      ]
    }
  },
  computed: {
    type () {
      return this.$route.meta.type
    }
  },
  watch: {
    type (newVal) {
      this.queryParams.type = newVal
      this.placeholder = this.queryParams.type === 4 ? '请输入学生学号或姓名或备案编号' : '请输入学生学号或姓名'
      this.query()
    }
  },
  created () {
    this.roleName = JSON.parse(sessionStorage.userInfo).roleName
    this.queryParams.type = this.$route.meta.type
    this.placeholder = this.queryParams.type === 4 ? '请输入学生学号或姓名或备案编号' : '请输入学生学号或姓名'
    this.query()
    this.listCollegeByUserUsingGET()
    dataDictUsingGET('object_oriented').then(res => {
      this.typeList = res.data
    })
  },
  methods: {
    // 获取院系
    listCollegeByUserUsingGET (id) {
      listCollegeByUserUsingGET(id).then(res => {
        this.colleges = res.data
      })
    },
    // 获取专业
    listMajorByCollegeIdUsingGET (id) {
      listMajorByCollegeIdUsingGET(id).then(res => {
        this.majors = res.data
      })
    },
    // 获取年级
    listGradeByMajorIdUsingGET (id) {
      listGradeByMajorIdUsingGET(id).then(res => {
        this.grades = res.data
      })
    },
    // 获取班级
    listClassByGradeAndMajorIdUsingGET (grade, id) {
      listClassByGradeAndMajorIdUsingGET(grade, id).then(res => {
        this.classes = res.data
      })
    },
    check (row, num) {
      this.dialogDetail = row
      this.filingShow = num === 2
      this.isFiling = num === 2
      findApplyDetailUsingGET(row.id).then(res => {
        this.stepData = []
        this.lastAgreeRole = ''
        res.data.forEach(ele => {
          if (ele.status === 2) {
            this.lastAgreeRole = ele.approvalRole
          }
          this.stepData.push({
            roleName: ele.approvalRole,
            des: ele.apinion,
            time: ele.approvalAt ? this.$moment(ele.approvalAt).format('YYYY.MM.DD HH:mm:ss') : '',
            status: ele.status
          })
        })
        console.log(res, '查看详情')
        if (num === 2) {
          getFilingNum(row.id).then(res => {
            this.filingNumber = res.data
            updateFiling(row.id, { filing: 1 }).then(res => {
              this.$message.success('操作成功')
              this.query()
            })
          })
        }
        this.detailShow = true
      })
    },
    assign (row) {
      listAdjustRecordUsingGET(row.studentSn).then(res => {
        this.dialogDetail = row
        this.assignShow = true
      })
    },
    intoEditHistory () {
      this.$router.push({ name: 'editHistory' })
    },
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      listAboutMeUsingPOST(this.queryParams).then(res => {
        this.tabData = res.data.list
        this.total = res.data.total || 0
      })
    },
    reset () {
      this.queryParams = {
        approveStatus: null,
        size: 10,
        page: 1,
        collegeId: null,
        majorId: null,
        gradeName: null,
        classId: null,
        objectOrientedName: null,
        gender: null,
        snOrNameOrfiling: null,
        type: 4
      }
      this.queryParams.type = this.$route.meta.type
      this.query()
    },
    exportExl (url, body) {
      if (this.tabData.length) exportFile(url, body)
      else this.$message.error('数据为空，不能下载')
    },
    handleClose () {
      this.assignShow = false
      this.detailShow = false
      this.filingShow = false
      // this.filingNumber = ''
    }
  }
}
</script>
<style lang="less">
.el-radio-button--small .el-radio-button__inner {
  border-left: 1px solid #dcdfe6;
  margin-left: 10px;
  border-radius: 4px !important;
}
</style>
